<script>
export default {
  name: 'my-notify',
  props: {
    content: {
      type: String | Array,
    }
  },
  methods: {
    show() {
      this.$refs.popup.open()
    }
  }
}
</script>

<template>
  <uni-popup ref="popup" :mask-click="false" mask-background-color="rgba(0, 0, 0, .6)">
    <view class="notify-layout">
      <view class="notify-header">
        系统公告
      </view>
      <view class="notify-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </view>
    <button class="notify-btn-close" @click="$refs.popup.close()"></button>
  </uni-popup>
</template>

<style scoped lang="scss">
.notify-layout {
  z-index: 9999;
  max-height: 600rpx;
  min-height: 400rpx;
  width: 600rpx;
  background-image: url("https://www.dingxians.cn/upload/images/common/bg-dialog.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-bottom: 30rpx;

  color: white;
  display: flex;
  flex-direction: column;

  .notify-header {
    /*position: absolute;
    left: 50%;
    top: -20rpx;
    transform: translateX(-50%);*/
    font-size: 40rpx;
    font-family: 'youshe', serif;
    transform: translateY(-20rpx);
    align-self: center;
    text-shadow: 1px 1px 2px #000;
  }

  .notify-content {
    flex: 1;
    box-sizing: border-box;
    padding: 0 30rpx;
    font-size: 24rpx;
    overflow-y: scroll;
    color: #dedede;
  }
}

.notify-btn-close {
  margin-top: 30rpx;
  background-color: transparent;
  width: 60rpx;
  height: 60rpx;
  background-image: url("https://www.dingxians.cn/upload/images/shop/close-btn.png");
  background-size: 100% 100%;
}
</style>